<template>
  <div class="mainContent">
    <pathTracking :path="Model.path"/>
    <div class="container">
      <div class="tableBox">
        <div class="table">
          <el-row>
            <div class="common-table-title">
              <div class="common-table-icon"></div>
              <div class="common-table-fl">订单变更单信息</div>
            </div>
          </el-row>
          <div class="formInline">
            <el-form :inline="true" :model="Model.tableFormInline" class="demo-form-inline">
              <el-form-item label="订单编号">:{{Model.tableFormInline.order}}</el-form-item>
              <el-form-item label="原sap销售订单号">:{{Model.tableFormInline.defaultSapOrder}}</el-form-item>
              <el-form-item label="下单人">:{{Model.tableFormInline.user}}</el-form-item>
              <el-form-item label="配送类型">:{{Model.tableFormInline.deliveryType}}</el-form-item>
              <el-form-item label="发货平台">:{{Model.tableFormInline.deliveryAddress}}</el-form-item>
              <el-form-item label="销售来源">:{{Model.tableFormInline.soleAddress}}</el-form-item>
              <el-form-item label="销售员">:{{Model.tableFormInline.soler}}</el-form-item>
            </el-form>
          </div>
          <div style="padding:0 15px;background:#fff;">
            <el-table
              :data="Model.tableData"
              border
              style="width: 100%;max-height:550px"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="index" width="50" label="序号" fixed></el-table-column>
              <el-table-column prop="origin" label="定制编号" width="100"></el-table-column>
              <el-table-column prop="deliveryTime" label="产品类型" width="120"></el-table-column>
              <el-table-column prop="deliveryTime2" label="品类" width="120"></el-table-column>
              <el-table-column prop="orderId7">
                <template slot="header" slot-scope="scope">
                  <el-tooltip content="钻石信息顺序:颜色-净度-切工-抛光-对称-荧光" placement="top">
                    <span>描述 ？</span>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column prop="qcFinishTime" label="刻字" width="120"></el-table-column>
              <el-table-column prop="status" label="客户收货日期" width="200"></el-table-column>
              <el-table-column prop="status" label="价格" width="120"></el-table-column>
              <el-table-column prop="status" label="特殊定制要求" width="120"></el-table-column>
              <el-table-column prop="status" label="备注" width="120"></el-table-column>
              <el-table-column prop="status" label="主数量" width="120"></el-table-column>
              <el-table-column fixed="right" :label="$t('common.handleOption')" width="150">
                <template slot-scope="scope">
                  <div class="btnGroup">
                    <div class="operate-btn" @click="toggleDialog(true)">变更商品</div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="formInline">
            <div>
              其他信息修改:
              {{'暂无'}}
            </div>
            <div>是否需要延期发货:
              <el-radio-group v-model="Model.deliveryRadio">
                <el-radio :label="0">否</el-radio>
                <el-radio :label="1">是</el-radio>
              </el-radio-group>
            </div>
            <div>是否需要修改收货日期:
              <el-date-picker v-model="Model.deliveryDatePick" type="date" placeholder="选择日期"></el-date-picker>
              {{'不能早于2019年1月4日'}}
            </div>
          </div>
          <div class="footerBtnBox">
            <div class="footerBtn">提交售中变更单</div>
            <div class="footerBtn" @click="goBack()">取消</div>
          </div>
        </div>
      </div>
      <el-dialog title :visible.sync="Model.outerVisible">
        <div slot="title">
          <div class="common-table-title">
            <div class="common-table-icon"></div>
            <div class="common-table-fl">供应商发货通知单列表详情</div>
          </div>
        </div>
        <div class="dialogBody">
          <div class="itemBox">
            <div class="dialogSecTitle">
              <span class="dialogTitleIcon"></span>有明确条码
            </div>
            <advancedSearch
              :option="Model.filterOption"
              @getChild="showSureBarCode"
              @onSearch="toSearchSureBarCode"
            ></advancedSearch>
          </div>
          <div class="itemBox">
            <div class="dialogSecTitle">
              <span class="dialogTitleIcon"></span>无明确条码
            </div>
            <div class="dialogTable">
              <el-row>
                <div class="common-table-title">
                  <div class="common-table-icon"></div>
                  <div class="common-table-fl">第一步 请选择款式信息</div>
                </div>
              </el-row>
              <advancedSearch :option="Model.filterOption2" @getChild="showNotSureBarCodeP1"></advancedSearch>
            </div>
            <div class="dialogTable">
              <el-row>
                <div class="common-table-title">
                  <div class="common-table-icon"></div>
                  <div class="common-table-fl">第二步 请选择具体参数</div>
                </div>
              </el-row>
              <div class="sliderBox">
                <div class="sliderItem">
                  <div>
                    <div class="sliderItemLabel">钻重范围</div>
                    <div
                      class="sliderItemValue"
                    >： {{Model.sliderSelect.size.sliderVal[0]+'~'+Model.sliderSelect.size.sliderVal[1]}}</div>
                    <el-select
                      size="small"
                      v-model="Model.sliderSelect.size.value"
                      placeholder="请选择"
                      @change="onSelectChange('size')"
                    >
                      <el-option
                        v-for="(item,index) in Model.sliderSelect.size.option"
                        :key="index"
                        :label="item.label"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </div>
                  <div>
                    <el-slider v-model="Model.sliderSelect.size.sliderVal" range></el-slider>
                  </div>
                </div>
                <div class="sliderItem">
                  <div>
                    <div class="sliderItemLabel">手寸范围</div>
                    <div
                      class="sliderItemValue"
                    >： {{Model.sliderSelect.weight.sliderVal[0]+'~'+Model.sliderSelect.weight.sliderVal[1]}}</div>
                    <el-select
                      size="small"
                      v-model="Model.sliderSelect.weight.value"
                      placeholder="请选择"
                      @change="onSelectChange('weight')"
                    >
                      <el-option
                        v-for="(item,index) in Model.sliderSelect.weight.option"
                        :key="index"
                        :label="item.label"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </div>
                  <div>
                    <el-slider v-model="Model.sliderSelect.weight.sliderVal" range></el-slider>
                  </div>
                </div>
              </div>
              <advancedSearch
                :option="Model.filterOption3"
                @getChild="showNotSureBarCodeP2"
                @onSearch="toSearchNotSureBarCode"
                @onClear="toClear"
              ></advancedSearch>
            </div>
            <div class="dialogTable">
              <el-row>
                <div class="common-table-title">
                  <div class="common-table-icon"></div>
                  <div class="common-table-fl">商品信息列表</div>
                </div>
              </el-row>
              <el-table :data="Model.dialogTableData" style="width: 100%" >
                <!-- <el-table-column type="selection" width="50" fixed></el-table-column> -->
                <el-table-column width="50" fixed>
                  <template slot-scope="scope">
                    <el-radio v-model="Model.dialogTableSelect" :label="scope.row.poCode">{{scope.row.poCode}}</el-radio>
                  </template>
                </el-table-column>
                <el-table-column prop="poCode" label="图片" fixed width="140"></el-table-column>
                <el-table-column prop="poType" label="现货成品" width="120"></el-table-column>
                <el-table-column prop="barCode" label="门店" width="140"></el-table-column>
                <el-table-column prop="styleNo" label="仓位" width="140"></el-table-column>
                <el-table-column prop="lettering" label="款式名称" width="120"></el-table-column>
                <el-table-column prop="goldMaterialOne" label="品类" width="140"></el-table-column>
                <el-table-column prop="goldMaterialWeightOne" label="系列" width="120"></el-table-column>
                <el-table-column prop="goldMaterialTwo" label="条码" width="140"></el-table-column>
                <el-table-column prop="goldMaterialWeightTwo" label="手寸" width="120"></el-table-column>
                <el-table-column prop="assistStoneExteriorOne" label="材质" width="140"></el-table-column>
                <el-table-column prop="assistStoneNumberOne" label="钻重" width="120"></el-table-column>
                <el-table-column prop="assistStoneExteriorTwo" label="主石形状" width="140"></el-table-column>
                <el-table-column prop="assistStoneNumberTwo" label="主石外观" width="120"></el-table-column>
                <el-table-column prop="productTotalWeight" label="切工" width="120"></el-table-column>
                <el-table-column prop="dictQcStatus.remark" label="抛光" width="120"></el-table-column>
                <el-table-column prop="dictSendStatus.remark" label="颜色" width="120"></el-table-column>
                <el-table-column prop="dictSendStatus.remark" label="净度" width="120"></el-table-column>
                <el-table-column prop="dictSendStatus.remark" label="对称" width="120"></el-table-column>
                <el-table-column prop="dictSendStatus.remark" label="价格/RMB" width="120"></el-table-column>
              </el-table>
              <!-- 分页 -->
              <el-row class="pagination-cont">
                <el-pagination
                  @size-change="handleSizeChange"
                  background
                  @current-change="handleCurrentChange"
                  :current-page="Model.pager.params.pageIndex"
                  :page-sizes="Model.pager.pageSizeArr"
                  :page-size="Model.pager.params.pageSize"
									:pager-count="5"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="Model.pager.pageTotal"
                ></el-pagination>
              </el-row>
              <div class="dialogFooter">
                <div @click="toggleDialog(false)">取 消</div>
              </div>
            </div>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import pathTracking from "@/components/common/pathTracking";
import pagination from "@/components/common/pagination.vue";
import advancedSearch from "@/components/common/filter/advancedSearch";
import { getDateString } from "@/assets/js/common.js";
import Model from "./model.js";
import Controller from "./controller.js";
export default {
  name: "purchase",
  mixins: [Model, Controller],
  components: {
    advancedSearch,
    pagination,
    pathTracking
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@import "./index.less";
</style>